<template>
	<view class="">
		<!-- <u-navbar leftText=" " title=" " :safeAreaInsetTop="true" :placeholder="true">
			<view class="u-nav-slot" slot="left" @click="left">
				<u-icon name="arrow-left" color="#000000" size="16" :bold="true"></u-icon>
			</view>
		</u-navbar> -->
		<!-- <image class="bg-c" src="../../static/images/bg-c.png" mode="aspectFill"></image> -->
		<view class="pages" style="height: 60vh;" v-if="personalityTags">
			<view class="pages-left" style="height: 60vh;">
				<scroll-view style="height: 60vh;" scroll-y class="pages-left" :show-scrollbar="false">
					<view class="pages-left-li" v-for="(item, index) in personalityTags" :key="index"
						@click="tabClick(item, index)">
						<text class="pages-left-li-txt"
							:class="{ 'pages-left-li-act': tabIndex == index }">{{ item.remark }}</text>
					</view>
				</scroll-view>
			</view>
			<view class="pages-right">
				<scroll-view style="height: 60vh;" scroll-y class="pages-right" :scroll-top="scrollTop"
					scroll-with-animation @scroll="scrollChange">
					<view class="pages-right-ul" ref="pagesRight" v-for="(item, index) in personalityTags" :key="index">
						<view class="pages-right-box">
							<view class="pages-right-li" @click="tagsClick(index,childIndex)" 
								:style="'width:' + 520 / 3 + 'rpx;height:' + 520 / 3 + 'rpx;'"
								v-for="(child, childIndex) in item.children" :key="childIndex">
								<image :src="child.icon" class="pages-right-li-img" />
								<text class="pages-right-li-txt">{{ child.remark }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="choose-page">
				<view class="" style="margin-top: 20rpx;margin-left: 15rpx;font-weight: 500;">
					已添加 {{changeList.length}}个
				</view>
				<view class="" style="margin-top: 20rpx;">
					<view class="pages-right-box">
						<view class="pages-right-li" style="margin: 18rpx;" :style="'width:' + 600 / 4 + 'rpx;height:' + 600 / 4 + 'rpx;'"
							v-for="(item, index) in changeList" :key="index">
							<view class="" style="width: 100%;text-align: right;margin-top: -15rpx;"
								@click="closeChange(index)">
								<image src="/static/images/clo.png" mode="scaleToFill"
									style="width: 35rpx;height: 35rpx;"></image>
							</view>
							<image :src="item.icon" class="pages-right-li-img" style="width: 80rpx;height: 80rpx;" />
							<text class="pages-right-li-txt" style="font-size: 25rpx;margin-top: 10rpx;">{{ item.remark }}</text>
						</view>
					</view>
				</view>
				<view
					style="position: fixed;bottom: 30rpx;width: 90%;margin-top: 50rpx;display: flex;justify-content: center;align-items: center;margin-left: 5%;margin-right: 5%;">
					<!-- <button class="to-btn">下一步</button> -->
					<view class="to-btn" @click="stepToNext">
						提交
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		updateUserInfo,
		getTagsList,
		getUserDetail
	} from '@/common/api.js';
	var _self;
	export default {
		data() {
			return {
				screenHeight: 0,
				tabIndex: 0,
				scrollTop: 0,
				scrollHeight: 0, // 计算末尾列表高度
				scrollList: [], // 记录右侧滚动距离
				viewModel: null,
				timer: null, // scroll 滚动倒计时
				personalityTags: [],
				changeList: [],
				gender: '',
				birthday: '',
				height: '',
				weight: '',
				education: '',
				income: '',
				deptId: '',
				name: '',
				idcard: '',
				phone: '',
				avatar: '',
				obj: {},
				height: '',
				weight: '',
				education: '',
				income: '',
				house: '',
				car: '',
				school: '',
				introduce: '',
				type: '',
				wxCode: '',
				nation: ''
			}

		},

		onShow() {},
		onLoad(options) {
			_self = this;
			_self.wxCode = options.wxCode;
			_self.height = options.height;
			_self.weight = options.weight;
			_self.education = options.education;
			_self.income = options.income;
			_self.house = options.house;
			_self.car = options.car;
			_self.school = options.school;
			_self.introduce = options.introduce;
			_self.nation = options.nation;
			_self.type = options.type;
			_self.screenHeight = uni.getSystemInfoSync().windowHeight;
			if (_self.type == 'once') {
				getTagsList({

				}).then(res => {
					_self.personalityTags = res.data;
					setTimeout(() => {
						_self.getRightQuery()
					}, 100)
				}).catch({

				});
			} else {
				_self.init()
			}

		},
		methods: {
			left() {
				uni.navigateBack()
			},
			init() {
				getUserDetail({
					userId: this.vuex_userid
				}).then(res => {
					if (res.data.labelList) {
						_self.changeList = res.data.labelList;
					}
				}).catch({

				})
				// _self.viewModel = _self.personalityTags;
				getTagsList({

				}).then(res => {
					_self.personalityTags = res.data;
					setTimeout(() => {
						_self.getRightQuery()
					}, 1000)
				}).catch({

				});

			},
			getRightQuery() {
				this.$nextTick(() => {
					uni.createSelectorQuery().selectAll('.pages-right-ul').boundingClientRect(data => {
						_self.scrollList = data.map(item => {
							return {
								top: Math.round(item.top),
								height: Math.round(item.height)
							}
						})
					}).exec()
				});
				console.log('_self.scrollList111 = ', _self.scrollList);
				let listHeight = _self.scrollList[_self.scrollList.length - 1].height
				_self.scrollHeight = _self.screenHeight - listHeight
			},
			tabClick(item, index) {
				console.log('_self.scrollList222 = ', _self.scrollList);
				_self.scrollTop = _self.scrollList[index].top
			},
			scrollChange(ev) {
				console.log('ev = ', ev);
				var scorllTop = Math.round(ev.detail.scrollTop)
				console.log('scorllTop = ', scorllTop);
				for (var i = 0; i < _self.scrollList.length; i++) {
					if (_self.scrollList[i].top <= scorllTop && scorllTop < (_self.scrollList[i].top + _self.scrollList[i]
							.height)) {
						_self.tabIndex = i
					}
				}
			},
			tagsClick(index, childIndex) {
				if (_self.changeList.length < 8) {
					for (var i = 0; i < _self.changeList.length; i++) {
						if (_self.changeList[i].id == _self.personalityTags[index].children[childIndex].id) {
							uni.showModal({
								title: '',
								content: "您已选择该标签",
								showCancel: false,
								confirmText: '确定',
								success: res => {
									if (res.confirm) {

									}
								}
							});
							return;
						}
					}
					_self.changeList.push(_self.personalityTags[index].children[childIndex]);
				} else if (_self.changeList.length == 0) {
					_self.changeList.push(_self.personalityTags[index].children[childIndex]);
				} else {
					uni.showModal({
						title: '',
						content: "您最多可以选择8个标签",
						showCancel: false,
						confirmText: '确定',
						success: res => {
							if (res.confirm) {}
						}
					});
				}



			},
			closeChange(index) {
				_self.changeList.splice(_self.changeList.indexOf(_self.changeList[index]), 1);
			},
			stepToNext() {
				var label = [];
				for (var i = 0; i < _self.changeList.length; i++) {
					label.push(_self.changeList[i].id);
				}
				if (_self.type == 'once') {
					updateUserInfo({
						userId: this.vuex_userid,
						openId: this.vuex_openid,
						token: this.vuex_token,
						wechat: _self.wxCode,
						height: _self.height,
						weight: _self.weight,
						edu: _self.education,
						income: _self.income,
						isHouse: _self.house == '有房' ? '1' : '0',
						isCar: _self.car == '有车' ? '1' : '0',
						school: _self.school,
						introduce: this.introduce,
						nation: _self.nation,
						label: label.join(),
						isCharge: '4',
					}).then(res => {
						uni.switchTab({
							url: "/pages/tab/index"
						})
					}).catch({

					})
				} else {
					updateUserInfo({
						userId: this.vuex_userid,
						openId: this.vuex_openid,
						token: this.vuex_token,
						label: label.join(),
					}).then(res => {
						uni.navigateBack();
					}).catch({

					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		display: flex;
		background-color: #ffffff;
	}

	.pages-left {
		width: 150rpx;
		background-color: #ffffff;
		box-sizing: border-box;
	}

	.pages-left-li {
		height: 95rpx;
		box-sizing: border-box;
		text-align: center;
		margin-top: 40rpx;
	}

	.pages-left-li-txt {
		line-height: 95rpx;
		text-align: center;
		color: #343434;
		font-size: 30rpx;
	}

	.pages-left-li-act {
		color: #007AFF;
		background-color: #f5f5f5;
	}

	.pages-right {
		width: 610rpx;
		background-color: #ffffff;
		box-sizing: border-box;
	}

	.pages-right-ul {
		width: 610rpx;
		height: 60vh;
	}

	.pages-right-box {
		display: flex;
		flex-wrap: wrap;
	}

	.pages-right-li {
		height: 200rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 15rpx;
		background-color: #f5f5f5;
		border-radius: 30rpx;
	}

	.pages-right-li-img {
		width: 70rpx;
		height: 70rpx;
	}

	.pages-right-li-txt {
		margin-top: 10rpx;
		font-size: 28rpx;
	}

	.choose-page {
		position: fixed;
		height: 38vh;
		bottom: 1rpx;
		z-index: 99999;
		background-color: #ffffff;
		width: 100%;
	}

	.to-btn {
		width: 536rpx;
		height: 84rpx;
		background: linear-gradient(86deg, #C2D2F9 0%, #C5C2F3 100%);
		border-radius: 42rpx 42rpx 42rpx 42rpx;
		text-align: center;
		line-height: 84rpx;
		margin: auto;
		color: rgba(65, 92, 158, 0.9);
		font-weight: 400;
		// position: fixed;
		// bottom: 15vh;
		// left: 112rpx;
		font-size: 28rpx;
		font-family: 'PingFang SC-Bold, PingFang SC';
	}
</style>